<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        #father {
            border: 1px solid blue;
            width: 1210px;
            height: 70px;
            margin: auto;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1400px;
            margin: 0 auto;
            height: 70px;
        }

        .left {
            width: 18.33%;
            height: 50px;
            background: white;
            float: left;
        }

        .middle {
            width: 53.33%;
            height: 50px;
            background: white;
            float: left;
        }

        .right {
            width: 25.33%;
            background: white;
            height: 50px;
            float: right;
        }

        .menuDiv {
            border: 2px solid #aac;
            overflow: hidden;
            display: inline-block;

        }

        /* 去掉a标签的下划线 */
        .menuDiv a {
            text-decoration: none;

        }

        /* 设置ul和li的样式 */
        .menuDiv ul,
        .menuDiv li {
            list-style: none;
            margin: 1px;
            padding: 0;
            float: left;

        }

        /* 设置二级菜单绝对定位，并隐藏 */
        .menuDiv>ul>li>ul {
            position: absolute;
            display: none;

        }

        /* 设置二级菜单的li的样式 */
        .menuDiv>ul>li>ul>li {
            float: none;
        }

        /* 鼠标放在一级菜单上，显示二级菜单 */
        .menuDiv>ul>li:hover ul {
            display: block;
        }

        /* 一级菜单 */
        .menuDiv>ul>li>a {
            width: 120px;
            line-height: 40px;
            color: black;
            background-color: #cfe;
            text-align: center;
            border-left: 1px solid #bbf;
            display: block;
        }

        /* 在一级菜单中，第一个不设置左边框 */
        .menuDiv>ul>li:first-child>a {
            border-left: none;
        }

        /* 在一级菜单中，鼠标放上去的样式 */
        .menuDiv>ul>li>a:hover {
            color: #f0f;
            background-color: #bcf;
        }

        /* 二级菜单 */
        .menuDiv>ul>li>ul>li>a {
            width: 120px;
            line-height: 36px;
            color: #456;
            background-color: #eff;
            text-align: center;
            border: 1px solid #ccc;
            border-top: none;
            display: block;
        }

        /* 在二级菜单中，第一个设置顶边框 */
        .menuDiv>ul>li>ul>li:first-child>a {
            border-top: 1px solid #ccc;
        }

        /* 在二级菜单中，鼠标放上去的样式 */
        .menuDiv>ul>li>ul>li>a:hover {
            color: #a4f;
            background-color: #cdf;
        }

        /*#claer{
				clear: both;
			}*/

        .demo {
            width: 1200px;
            height: 400px;
            margin: 0px auto;
            /* background-color:aquamarine; */
            overflow: hidden;
            /*用于隐藏超出展示容器的内容部分*/
        }

        .demo1 {
            width: 6000px;
            height: 400px;
            margin: 12px auto;
            animation: text 15s infinite linear;
            font-size: 0px;
            /*消除图片间隔*/

        }

        .demo1 img {
            width: 1230px;
            height: 400px;
            float: left;
        }

        @keyframes text {

            /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
            0%,
            10% {
                margin-left: 0px;
            }

            20%,
            30% {
                margin-left: -1200px;
            }

            40%,
            50% {
                margin-left: -2400px;
            }

            60%,
            70% {
                margin-left: -3600px;
            }

            80%,
            90% {
                margin-left: -4800px;
            }
        }

        .flex {
            display: flex;
            flex-flow: row wrap;
            margin-top: 5px;
            box-sizing: border-box;
            justify-content: center;
            align-items: center;
        }

        .flex div {
            width: 270px;
            height: 102px;
            margin-bottom: 6px;
            border: 1px solid black;
        }

        #min {
            padding-top: 13px;
            width: 1210px;
            height: 70px;
        }

        .bottom01 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="father">
        <!--1.logo部分、导航栏部分-->
        <div class="main">
            <div class="left">
                <img src="../../img/logo.jpg" border="1px" height="70px" width="220px" />
            </div>

            <!-- -------菜单html代码---------begin------- -->
            <div class="middle">

                <div class="menuDiv">
                    <ul>
                        <li>
                            <a href="#">合同审查</a>
                        </li>
                        <li>
                            <a href="#">法律咨询</a>
                            <ul>
                                <li><a href="#">法律课堂</a></li>
                                <li><a href="#">律师干货</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">社区答疑</a>
                        </li>
                        <li>
                            <a href="#">客户案例</a>
                        </li>
                        <li>
                            <a href="#">就业指导</a>
                            <ul>
                                <li><a href="#">公益活动</a></li>
                                <li><a href="#">企业招聘</a></li>
                                <li><a href="#">政策解说</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">关于我们</a>
                            <ul>
                                <li><a href="#">平台介绍</a></li>
                                <li><a href="#">核心理念</a></li>
                                <li><a href="#">项目合作</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>

            <!-- -------菜单html代码---------end------- -->
            <div class="right" align="left">
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </div>
    </div>
    </div>

    </div>

    <!--<div id="clear">  	
            </div>-->

    <!--2.轮播图部分-->
    <div class="demo">
        <!-- 创建图片存储容器 -->
        <div class="demo1">
            <!-- 引入轮播图图片 -->
            <img src="../../img/1.jpg" alt="" />
            <img src="../../img/2.jpg" alt="" />
            <img src="../../img/bartlesvillecf.jpg" alt="" />
            <img src="../../img/emancipation.jpg" alt="" />
            <img src="../../img/footer.jpg" alt="" />
        </div>
    </div>

    <!--3.导航栏2-->
    <div class="flex " id="min" align="center">
        <div>
            <ul><a href="#"><img src="../../img/待审核.png" width="60px" height="70px">
                    <li>合同审查</li>
                </a> </ul>
        </div>
        <div>
            <ul><a href="#"><img src="../../img/答疑.png" width="60px" height="70px">
                    <li>社区答疑</li>
                </a> </ul>
        </div>
        <div>
            <ul><a href="#"><img src="../../img/课堂.png" width="60px" height="70px">
                    <li>法律课堂</li>
                </a> </ul>
        </div>
        <div>
            <ul><a href="#"><img src="../../img/客户案例.png" width="60px" height="70px">
                    <li>客户案例</li>
                </a> </ul>
        </div>







        <!--4.友情链接-->
        <div class="bottom01">
            <div class="bottom02">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">法律声明</a>
                <a href="#">友情链接</a>
                <a href="#">服务声明</a>
                <p>
                    @志同道合 版权所有
                </p>
            </div>
        </div>
    </div>
</body>

</html>